<template>
  <div class="app-container">
    各种指令合集
    <div class="map-class" style="height: 200px;">
      水波纹
      <ripple></ripple>
    </div>
    <div class="map-class" style="height: 600px;">
      水印生成
      <waterMarker></waterMarker>
    </div>
    <div class="map-class" style="height: 200px;">
      按钮权限简易版
      <permission></permission>
    </div>
    <div class="map-class" style="height: 200px;">
      长按指令
      <longpress></longpress>
    </div>
    <div class="map-class" style="height: 200px;">
      禁止emoji表情输入
      <emoji></emoji>
    </div>
    <div class="map-class" style="height: 200px;">
      图片懒加载
      <lazyLoad></lazyLoad>
    </div>
    <div class="map-class" style="height: 200px;">
      全屏组件(封装成指令无法获取指定哪个元素全屏)
      <screenfull></screenfull>
    </div>
    <div class="map-class" style="height: 200px;">
      返回顶部 (拿不到节点dom 未生效)
      <backtop></backtop>
    </div>
    <div class="map-class" style="height: 200px;">
      为空指令 未生效 原因不明
      <empty></empty>
    </div>
    <div class="map-class" style="height: 200px;">
      点击范围扩大
      <expandClick></expandClick>
    </div>
    <div class="map-class" style="height: 200px;">
      防止重复点击
      <preventReClick></preventReClick>
    </div>
    <div class="map-class" style="height: 200px;">
      监听窗口变化
      <resize></resize>
    </div>
        <div class="map-class" style="height: 200px;">
      换行就自动显示title111
      <showTitle></showTitle>
    </div>
  </div>
</template>

<script>
import ripple from './ripple/ripple';
import waterMarker from './waterMarker/index.vue';
import permission from './permission/index.vue';
import copy from './copy/index.vue';
import longpress from './longpress/index.vue';
import emoji from './emoji/index.vue';
import lazyLoad from './lazyLoad/index.vue';
import screenfull from './screenfull/index.vue';
import backtop from './backtop/index.vue';
import empty from './empty/index.vue';
import expandClick from './expandClick/index.vue';
import preventReClick from './preventReClick/index.vue';
import resize from './resize/index.vue';
import showTitle from './showTitle/index.vue';
export default {
  mixins: [],
  components: {
    ripple,
    waterMarker,
    permission,
    copy,
    longpress,
    emoji,
    lazyLoad,
    screenfull,
    backtop,
    empty,
    expandClick,
    preventReClick,
    resize,
    showTitle
  },
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {},
  created() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.map-class {
  border-bottom: 1px solid #979797;
}
</style>
